<!doctype html>
<html class="reftest-wait reftest-no-flush">
<head>
<meta charset=utf-8>
<title>Bug 1267937</title>
<style>
#target {
  width: 100px;
  height: 100px;
  background: green;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
  var target = document.getElementById("target");
  var anim = target.animate(
    { marginLeft: [ "0px", "10px" ] },
    { duration: 500000 /* 500s */, easing: "steps(2, start)" });

  anim.ready.then(function() {
    // Set currentTime in before phase, i.e., GetComputedTimingAt() returns
    // null progress in the phase so that we can skip ComposeStyle().
    // This currentTime value should be far from zero in order to skip
    // restyles requested by setting currentTime or frames in a next tick.
    // If this value is near by zero, say -1, the restyles will be processed in
    // the next tick and current time in the next tick must be greater than
    // zero at that point, that means the animation with new frame values will
    // be painted.  As a result, this test will be useless.
    anim.currentTime = -500;

    // Setting another frame does not cause any visual changes because
    // the animation is still in the before phase.
    anim.effect.setKeyframes({ marginLeft: [ "0px", "400px" ] });

    var beforePhaseFrames = 0;
    window.requestAnimationFrame(function handleFrame() {
      if (anim.effect.getComputedTiming().progress === null) {
        beforePhaseFrames++;
      }
      if (anim.effect.getComputedTiming().progress !== null) {
        if (beforePhaseFrames == 0) {
          console.log("WARNING: We never got frames in the before phase. " +
                      "This test is going to be passed accidentally. " +
                      "Consider setting smaller current time, e.g. -1000ms.");
        }
        // After starting the animation, progress should be 0.5, that means
        // margin-left is 200px.
        document.documentElement.classList.remove("reftest-wait");
        return;
      }
      window.requestAnimationFrame(handleFrame);
    });
  });
</script>
</body>
</html>
